<template>
    <div>
        <div style="margin-top:20px" class="row">
            <span style="width:60px">
                颜色：
            </span>
            <ColorSelect v-model:color="target.color" :mapColors="mapColors"></ColorSelect>
        </div>

        <ColorPicker ref="refPicker" v-model:value="target.value" style="margin-top:20px"></ColorPicker>

        <div style="margin-top:20px">
            <n-checkbox v-model:checked="target.gammaCorrect">Gamma校正</n-checkbox>
        </div>
        
    </div>
</template>


<script lang="ts" setup>
import { ref, Ref, h, watch } from 'vue'
import { AppModel } from '../../../../model/AppModel';
import { BeLED } from '../../../../model/parts/BeLED';
import ColorPicker from '../../../common/ColorPicker.vue';
import ColorSelect from '../ColorSelect.vue'

const props = defineProps<{
    model: AppModel ,
    target: BeLED ,
}>()
const refPicker = ref(null) as unknown as Ref<typeof ColorPicker>

const mapColors: any = {
    'red': {
        label: '红' ,
        value: [255, 0, 0]
    } ,
    'yellow': {
        label: '黄' ,
        value: [255, 255, 0]
    } ,
    'blue': {
        label: '蓝' ,
        value: [0, 0, 255]
    } ,
    'green': {
        label: '绿' ,
        value: [0, 255, 0]
    } ,
    'white': {
        label: '白' ,
        value: [255, 255, 255]
    } ,
}

const color = ref('red')

function setColor(_color: string) {

    color.value = _color

    if(props.target.figure) {
        let css: string = `rgb(${mapColors[_color].value.join(",")})`
        ; (props.target.figure as any).setColor(css)
    }
    
    props.target.color = _color

    refPicker.value.setColor(mapColors[_color].value)
    
    if(props.target.isConnectionReady()) {
        props.target.value = 255
    }
}

watch(() => props.target.color, setColor)
</script>